<template>
	<page-bg>
		<view class="top-tab flex-just-between">
			<view :class="{'active': isRegister}" @click="selectTab(true)">{{ $t('register.tabs.register') }}</view>
			<view :class="{'active': !isRegister}" @click="selectTab(false)">{{ $t('register.tabs.login') }}</view>
		</view>

		<view class="form">
			<!-- 		<view class="input-group">
				<image src="/static/login-phone.png" mode="aspectFit"></image>
				<input type="number" v-model="telephone" :placeholder="$t('register.placeholders.phone')"
					class="input" />
			</view> -->
			<view class="input-group">
				<image src="/static/login-phone.png" mode="aspectFit"></image>
				<input type="text" v-model="email" :placeholder="$t('register.placeholders.email')" class="input" />
			</view>

			<view class="input-group">
				<image src="/static/login-pwd.png"></image>
				<input type="password" v-model="password" :placeholder="$t('register.placeholders.password')"
					class="input" />
			</view>

			<view class="input-group" v-if="isRegister">
				<image src="/static/login-cpwd.png"></image>
				<input type="password" v-model="confirmPassword"
					:placeholder="$t('register.placeholders.confirmPassword')" class="input" />
			</view>

			<view class="input-group" v-if="isRegister">
				<image src="/static/login-phone.png"></image>
				<input type="text" v-model="referrerCode" :placeholder="$t('register.placeholders.referrerCode')"
					class="input" />
			</view>

			<view class="input-group" v-if="isRegister">
				<image src="/static/login-code.png"></image>
				<input type="text" v-model="authCode" :placeholder="$t('register.placeholders.verificationCode')"
					class="input" />

				<button class="send-code-btn" :disabled="sending" @click="sendAuthCode">
					{{ sending ? $t('register.loading.sending') + '(' + codeCountdown + 's)' : $t('register.buttons.send') }}
				</button>
			</view>

			<view v-if="!isRegister" class="other-style flex-just-between">
				<view @click="toNavigate(0)">{{ $t('register.links.verification') }}</view>
				<view @click="toNavigate(1)">{{ $t('register.links.forgotPassword') }}</view>
			</view>

			<view class="button-group">
				<button class="login-btn" :class="{'top': !isRegister}" @click="handleSubmit">
					{{ loading ? $t('register.loading') : (isRegister ? $t('register.buttons.register') : $t('register.buttons.oneClickLogin')) }}
				</button>
			</view>

			<view class="agreement" @click="isChecked=!isChecked" v-if="isRegister">
				<uni-icons :type="isChecked ? 'checkbox-filled' : 'circle'" :size="16" color="#52A5F3"></uni-icons>
				<text>{{ $t('register.agreement.prefix') }}</text>
				<text class="link" @click="navigateToTerms">{{ $t('register.agreement.terms') }}</text>
				<text>{{ $t('register.agreement.suffix') }}</text>
			</view>
		</view>
	</page-bg>
</template>

<script>
	import PageBg from '@/pages/components/page-bg/page-bg.vue';
	import loginApi from '@/api/login.js';

	export default {
		components: {
			PageBg
		},
		data() {
			return {
				isRegister: true, // 默认显示注册页面
				telephone: '',
				authCode: '',
				email: '',
				password: '',
				confirmPassword: '',
				referrerCode: '',
				loading: '',
				isChecked: false, //是否勾选
				sending: false, // 发送邀请码加载状态
				codeTimer: null, // 倒计时定时器
				codeCountdown: 60, // 倒计时秒数
			};
		},
		methods: {
			toNavigate(item) {
				const url = item === 1 ?
					'/pages/auth/change-password/password' // 新增国际化 URL 文本（如需）
					:
					'/pages/auth/verification/verification';
				uni.navigateTo({
					url: url
				});
			},
			selectTab(item) {
				this.isRegister = item;
			},
			navigateToTerms() {
				console.log('点击')
			},
			// 发送邀请码方法
			sendAuthCode() {
				// 校验手机号（假设邀请码需要手机号）
				if (!this.email) {
					uni.showToast({
						title: this.$t('register.errors.needEmail'),
						icon: 'none'
					});
					return;
				}

				// 防止重复点击
				if (this.sending) return;

				this.sending = true;
				this.codeCountdown = 60;
				
				// 启动倒计时
				this.startCountdown();
				
				// 调用获取邀请码的API
				loginApi.sendEmailcode({
					email: this.email
				}).then(res => {
					if (res.code === 0) {
						uni.showToast({
							title: this.$t('register.messages.codeSent'),
							icon: 'success'
						});
					} else {
						uni.showToast({
							title: res.msg || this.$t('register.errors.sendCodeFailed'),
							icon: 'none'
						});
						this.sending = false;
					}
				}).catch(err => {
					uni.showToast({
						title: err.msg || this.$t('register.errors.sendCodeFailed'),
						icon: 'none'
					});
					this.sending = false;
				});
			},

			// 启动倒计时
			startCountdown() {
				if (this.codeTimer) clearInterval(this.codeTimer);
				
				console.log("8978989")

				this.codeTimer = setInterval(() => {
					this.codeCountdown--;
					if (this.codeCountdown <= 0) {
						clearInterval(this.codeTimer);
						this.codeTimer = null;
						this.sending = false;
					}
				}, 1000);
			},

			handleSubmit() {
				if (this.isRegister) {
					// 注册逻辑 - 校验提示改为国际化
					if (!this.password || !this.confirmPassword || !this.referrerCode || !this.authCode) {
						uni.showToast({
							title: this.$t('register.errors.fillAllFields'), // 替换硬编码文本
							icon: 'none'
						});
						return;
					}
					if (this.password !== this.confirmPassword) {
						uni.showToast({
							title: this.$t('register.errors.passwordMismatch'), // 替换硬编码文本
							icon: 'none'
						});
						return;
					}
					uni.showLoading({
						title: this.$t('register.loading.registering'), // 替换硬编码文本
					});


					loginApi.register({
						password: this.password,
						authCode: this.authCode,
						email: this.email,
						referrerCode: this.referrerCode
					}).then(res => {
						uni.hideLoading();
						if (res.code === 0) {
							uni.showToast({
								title: this.$t('register.messages.registerSuccess'), // 替换硬编码文本
								icon: 'success'
							});
							this.isRegister = false;
						}
					}).catch(err => {
						uni.hideLoading();
						uni.showToast({
							title: err.msg || this.$t('register.errors.registerFailed'), // 替换硬编码文本
							icon: 'none'
						});
					});
				} else {
					// 登录逻辑 - 校验提示改为国际化
					if (!this.email || !this.password) {
						uni.showToast({
							title: this.$t('register.errors.fillAllFields'), // 替换硬编码文本
							icon: 'none'
						});
						return;
					}
					uni.showLoading({
						title: this.$t('register.loading.loggingIn'), // 替换硬编码文本
					});
					loginApi.login({
						username: this.email,
						password: this.password
					}).then(res => {
						uni.hideLoading();
						if (res.code === 0) {
							uni.showToast({
								title: this.$t('register.messages.loginSuccess'), // 替换硬编码文本
								icon: 'success'
							});
							uni.setStorageSync('token', res.data.access_token);
							uni.navigateTo({
								url: '/pages/index/index'
							});
						}
					}).catch(err => {
						uni.hideLoading();
						uni.showToast({
							title: err.msg || this.$t('register.errors.loginFailed'), // 替换硬编码文本
							icon: 'none'
						});
					});
				}
			}
		},

		// 页面卸载时清除定时器
		onUnload() {
			if (this.codeTimer) {
				clearInterval(this.codeTimer);
				this.codeTimer = null;
			}
		}
	};
</script>

<style lang="less" scoped>
	.top-tab {
		margin-top: 80rpx;
		padding: 0 82rpx;
		color: #fff;
		font-size: 36rpx;

		.active {
			color: #52A5F3;
			position: relative;

			&::before {
				content: "";
				position: absolute;
				left: 50%;
				margin-left: -18rpx;
				bottom: -12rpx;
				width: 36rpx;
				height: 6rpx;
				background-color: #52A5F3;
				border-radius: 3rpx;
			}
		}
	}

	.form {
		width: 100%;
		padding: 0 82rpx;
	}

	.input-group {
		margin-top: 40rpx;
		position: relative;

		image {
			position: absolute;
			top: 50%;
			margin-top: -20rpx;
			left: 46rpx;
			width: 34rpx;
			height: 40rpx;
		}

		input {
			padding-left: 100rpx;
		}

		// 新增发送按钮样式
		.send-code-btn {
			position: absolute;
			right: 44rpx;
			top: 50%;
			transform: translateY(-50%);
			width: 180rpx;
			height: 70rpx;
			line-height: 70rpx;
			padding: 0;
			font-size: 28rpx;
			background-color: #52A5F3;
			color: #fff;
			border-radius: 35rpx;
		}
	}

	.input,
	.login-btn {
		height: 108rpx;
		line-height: 108rpx;
		padding: 0 44rpx;
		border-radius: 54px;
		font-size: 32rpx;
		background-color: #fff;
		width: 100%;
	}

	.other-style {
		margin-top: 24rpx;
		color: #fff;
		font-size: 28rpx;

	}

	.login-btn {
		margin-top: 30rpx;
		background-color: #409eff;
		width: 100%;
		font-size: 36rpx;
		color: #fff;

		&.top {
			margin-top: 64rpx;
		}
	}

	.agreement {
		font-size: 24rpx;
		color: #fff;
		text-align: center;
		margin-top: 20rpx;
		line-height: 40rpx;

		.icons {
			margin-right: 10rpx;
		}
	}

	.link {
		color: #409eff;
		text-decoration: underline;
	}
</style>